<template>
	<view class="wrap">
		<!-- 标题 -->
		<slot name="title">
			<view title v-if="title" @click="clickTitle()">
				<slot name="txt"><text class="txt">{{title}}</text></slot>
				<view class="more" @click.stop="clickTitle(1)">
					<text v-if="more">{{more}}</text>
					<icons type="right"></icons>
				</view>
			</view>
		</slot>
		<!-- 列表 -->
		<slot>
			<view content :mini="mini" :style="lStyle">
				<scroll-view :style="itemStyle" :scroll-x="scrollX" :scroll-y="!!height">
					<template v-for="(item, index) in data">
						<view item :key="index" @click="$emit('click',item)">
							<slot name="item" :row="item" :index="index">
								<image img :src="item.img" mode="aspectFill"></image>
								<text name>{{item.name}}</text>
								<text tip v-if="item.up&&!mini">{{item.up}}</text>
							</slot>
						</view>
					</template>
				</scroll-view>
			</view>
		</slot>
	</view>
</template>

<script>
	export default {
		props:{
			data: { // 子数据
				type: Array,
				default: () => {return []}
			},
			title: String, // 标题
			more: String, // 更多
			scrollX: Boolean, // 横向滚动
			height: String, // 高度
			lStyle: String, // 内容区-外层style
			mini: Boolean, // 小模式
			fullTitle: Boolean // 整个title可以触发
		},
		data() {
			return {
				
			}
		},
		computed:{
			itemStyle() { // 滚动
				if (this.scrollX) {
					return 'white-space: nowrap;width: 100%;'
				}
				if (!this.scrollX && this.height) {
					return `height: ${this.height};`
				}
				return ''
			}
		},
		methods: {
			clickTitle(bool) {
				if (this.fullTitle) {
					this.$emit('click')
				} else {
					bool && this.$emit('click')
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
.wrap{
	[title]{
		padding: 0 20rpx;
		margin-bottom: 20rpx;
		.txt{
			color: $uni-text-color;
			font-size: 30rpx;
			font-weight: bold;
		}
		.more{
			color: $uni-text-color-grey;
			float: right;
			font-size: 20rpx;
			line-height: 25px;
			display: inline-block;
		}
	}
	[content]:not([mini]){
		[item]+[item]{
			width: calc(33.3% - 2rpx);
			margin-left: 2rpx;
		}
		[item]{
			width: 33.3%;
			text-align: center;
			display: inline-block;
			position: relative;
			margin-bottom: 20rpx;
			[img]{
				width: 100%;
				height: 300rpx;
			}
			[tip]{
				position: absolute;
				right: 0;
				top: 228rpx;
				color: #fff;
				font-size: 20rpx;
				padding: 10rpx;
				border-radius: 10rpx;
				background: #000;
			}
			[name]{font-size: 16px;display: block;}
		}
	}
	// mini模式
	[content][mini]{
		[item]{
			width: 126rpx;
			text-align: center;
			display: inline-block;
			position: relative;
			margin-right: 4rpx;
			margin-bottom: 20rpx;
		}
		[img]{
			width: 100%;
			height: 160rpx;
		}
		[name]{
			font-size: 12px;
			display: block;
			color: #7b7373;
		}
	}
}
</style>
